import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Select, Button, Table, DatePicker } from 'antd';
import moment from 'moment';
import styles from './SensitivePeriodList.less';

const Option = Select.Option;

@connect(({ SensitiveWindow }) => ({
  windowList: SensitiveWindow.windowList,
  updateDidFinish: SensitiveWindow.updateDidFinish,
}))
class SensitivePeriodList extends Component {
  state = {
    page_num: 1,
    type: 0,
    modalVisibility: false,
    selectedRows: [],
    modalId: undefined,
    modalReportType: 1,
    modalPublishState: 0,
    modalPublishDate: undefined,
    modalOperation: 'new',
  };

  updateData() {
    const { dispatch } = this.props;
    dispatch({
      type: 'SensitiveWindow/querySensitiveWindowList',
      payload: {
        page_num: this.state.page_num,
        page_size: 10,
        type: this.state.type,
      },
    });
  }

  componentDidMount() {
    this.setState({ loading: false });
    this.updateData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.updateDidFinish !== this.props.updateDidFinish) {
      this.updateData();
    } else if (prevProps.windowList !== this.props.windowList) {
      this.setState({ selectedRows: [] });
    }
  }

  render() {
    let { windowList } = this.props;

    const cols = [
      {
        title: '报告类型',
        dataIndex: 'report_type',
        key: 'report_type',
      },
      {
        title: '披露状态',
        dataIndex: 'published_state',
        key: 'published_state',
      },
      {
        title: '披露日期',
        dataIndex: 'published_time',
        key: 'published_time',
      },
      {
        title: '交易受限起始日期',
        dataIndex: 'trading_limit_start_time',
        key: 'trading_limit_start_time',
      },
      {
        title: '操作',
        key: 'operations',
        dataIndex: 'id',
        render: (text, row, index) => (
          <a
            onClick={() => {
              handleEditClick(index);
            }}
          >
            编辑
          </a>
        ),
      },
    ];

    let pager = {
      defaultCurrent: 1,
      total: windowList.total_count,
      onChange: (page, pageSize) => {
        this.setState({ page_num: page }, () => {
          this.updateData();
          this.setState({ selectedRows: [] });
        });
      },
    };

    const stateMap = {
      预披露: 0,
      已披露: 1,
    };

    const typeMap = {
      一季报: 1,
      半年报: 2,
      三季报: 3,
      年报: 4,
      业绩快报: 5,
      业绩预告: 6,
      业绩快报修正公告: 7,
      业绩预告修正公告: 8,
    };

    let handleEditClick = index => {
      this.setState({
        modalId: windowList.data_list[index].id,
        modalReportType: typeMap[windowList.data_list[index].report_type],
        modalPublishState: stateMap[windowList.data_list[index].published_state],
        modalPublishDate: windowList.data_list[index].published_time,
        modalVisibility: true,
        modalOperation: 'update',
      });
    };

    let handleDeleteClick = () => {
      if (this.state.selectedRows.length > 0) {
        const { dispatch } = this.props;
        let res = [];
        for (let i = 0; i < this.state.selectedRows.length; i++) {
          res.push(windowList.data_list[this.state.selectedRows[i]].id);
        }
        dispatch({
          type: 'SensitiveWindow/deleteSensitiveWindow',
          payload: {
            id: res.join(','),
          },
        });
      }
    };

    let handleTypeChange = type => {
      this.setState({ type });
    };

    let handleTableSelectChange = selectedRows => {
      console.log(selectedRows);
      this.setState({ selectedRows });
    };

    let clearModalValues = () => {
      this.setState({
        modalId: undefined,
        modalReportType: 1,
        modalPublishState: 0,
        modalPublishDate: undefined,
        modalVisibility: false,
      });
    };

    let handleModalOk = e => {
      const { dispatch } = this.props;
      if (this.state.modalOperation === 'new') {
        dispatch({
          type: 'SensitiveWindow/addSensitiveWindow',
          payload: {
            report_type: this.state.modalReportType,
            published_state: this.state.modalPublishState,
            published_time: this.state.modalPublishDate,
          },
        });
      } else {
        dispatch({
          type: 'SensitiveWindow/updateSensitiveWindow',
          payload: {
            id: this.state.modalId,
            report_type: this.state.modalReportType,
            published_state: this.state.modalPublishState,
            published_time: this.state.modalPublishDate,
          },
        });
      }
      clearModalValues();
    };

    let handleModalCancel = e => {
      clearModalValues();
    };

    let handleModalTypeChange = modalReportType => {
      this.setState({ modalReportType });
    };

    let handleModalStateChange = modalPublishState => {
      this.setState({ modalPublishState });
    };

    let handleModalDateChange = (moment, modalPublishDate) => {
      this.setState({ modalPublishDate });
    };

    return (
      <div style={{ margin: '24px 24px 0' }}>
        <div className={styles.outerWidthLim}>
          <div className={styles.outerHeightLim}>
            <div className={styles.contentCard}>
              <div className={styles.cardHeader}>
                <p className={styles.cardTitle}>独家头条</p>
                <div className={styles.operationBox}>
                  <a
                    onClick={() => {
                      this.setState({ modalVisibility: true, modalOperation: 'new' });
                    }}
                  >
                    添加
                  </a>
                  <span className={styles.smallGap}>|</span>
                  <a onClick={handleDeleteClick}>删除</a>
                </div>
                <Modal
                  title="敏感期窗口设定"
                  okText="保存"
                  visible={this.state.modalVisibility}
                  onOk={handleModalOk}
                  onCancel={handleModalCancel}
                >
                  <div>
                    <span style={{ color: 'red' }}>*</span>
                    <span className={styles.SelectTitle}>敏感期报：</span>
                    <Select
                      style={{ width: '75%' }}
                      value={this.state.modalReportType}
                      onChange={handleModalTypeChange}
                    >
                      <Option value={1}>一季报</Option>
                      <Option value={2}>半年报</Option>
                      <Option value={3}>三季报</Option>
                      <Option value={4}>年报</Option>
                      <Option value={5}>业绩快报</Option>
                      <Option value={6}>业绩预告</Option>
                      <Option value={7}>业绩快报修正公告</Option>
                      <Option value={8}>业绩预告修正公告</Option>
                    </Select>
                  </div>
                  <div style={{ marginTop: '20px' }}>
                    <span style={{ color: 'red' }}>*</span>
                    <span className={styles.SelectTitle}>披露状态：</span>
                    <Select
                      style={{ width: '75%' }}
                      value={this.state.modalPublishState}
                      onChange={handleModalStateChange}
                    >
                      <Option value={0}>预披露</Option>
                      <Option value={1}>已披露</Option>
                    </Select>
                  </div>
                  <div style={{ marginTop: '20px' }}>
                    <span style={{ color: 'red' }}>*</span>
                    <span className={styles.SelectTitle}>披露日期：</span>
                    <DatePicker
                      style={{ width: '75%' }}
                      defaultValue={
                        this.state.modalPublishDate
                          ? moment(this.state.modalPublishDate, 'YYYY-MM-DD')
                          : moment()
                      }
                      onChange={handleModalDateChange}
                    />
                  </div>
                </Modal>
              </div>
              <div className={styles.cardContent}>
                <div>
                  <span>报告类型：</span>
                  <Select
                    className={styles.tableMeta}
                    defaultValue={this.state.type}
                    onChange={handleTypeChange}
                  >
                    <Option value={0}>全部</Option>
                    <Option value={1}>一季报</Option>
                    <Option value={2}>半年报</Option>
                    <Option value={3}>三季报</Option>
                    <Option value={4}>年报</Option>
                    <Option value={5}>业绩快报</Option>
                    <Option value={6}>业绩预告</Option>
                    <Option value={7}>业绩快报修正公告</Option>
                    <Option value={8}>业绩预告修正公告</Option>
                  </Select>
                  <Button
                    className={styles.tableButton + ' ' + styles.pullRight}
                    onClick={() => {
                      window.location.reload();
                    }}
                  >
                    清空查询
                  </Button>
                  <Button
                    type="primary"
                    className={styles.tableButton + ' ' + styles.pullRight}
                    onClick={() => {
                      this.updateData();
                    }}
                  >
                    查询
                  </Button>
                </div>
                <Table
                  className={styles.bigTable}
                  columns={cols}
                  rowSelection={{
                    selectedRowKeys: this.state.selectedRows,
                    onChange: handleTableSelectChange,
                  }}
                  dataSource={windowList.data_list}
                  pagination={pager}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default SensitivePeriodList;
